<template>
  <!-- 第一标签页 -->
  <el-tabs v-model="activeName" @tab-click="handleClick1">
    <el-drawer title="抽屉" :visible.sync="drawer" :with-header="false">
      <span>任务描述</span>
      <!-- 任务描述-->
      <el-input type="textarea" :rows="2" placeholder="请输任务描述" v-model="textarea">
      </el-input>
      <!-- 需求 -->
      <span style="margin-top: 3rem;">子需求</span>
      <span><el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
          :on-exceed="handleExceed" :file-list="fileList">
          <el-button size="small" type="text" class="el-icon-circle-plus"></el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        </span>
      <!-- 关联业务 -->
      <!-- <div style="margin-top: 3rem;">
        <span>关联业务</span>
      <template>
        <el-button class="el-icon-circle-plus" type="text" @click="related"></el-button>
      </template>
      </div> -->


      <!-- 上传附件 -->
      <div style="margin-top: 3rem;">附件</div>
      <span><el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
          :on-exceed="handleExceed" :file-list="fileList">
          <el-button size="small" type="text" class="el-icon-circle-plus"></el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload></span>
      <!-- 添加工时 -->
      <div style="margin-top: 3rem;">
        <div>添加工时</div>
        <span>实际投入时长</span>
        <span style="margin-left: 150px;">剩余工时</span>
      </div>
      <div>
        <el-input v-model="estimatedHeadCount" style="width: 200px;"></el-input>
        <span style="margin-left: 3rem"><el-input v-model="estimatedHeadCount" style="width: 200px;"></el-input></span>
      </div>
      <el-progress :percentage="50"></el-progress>
      <span>已记录1小时</span>
      <span style="margin-left: 10rem;">剩余10小时</span>
      <!-- 任务进度 -->
      <div style="margin-top: 3rem;">任务进度</div>
      <template>
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>
      <div>
        <el-button type="primary" style="margin-top: 5rem; margin-left: 20rem;">保存</el-button>
      <el-button>取消</el-button>
      </div>
    </el-drawer>
    <!-- 仪表盘 -->
    <el-tab-pane label="仪表盘" name="first">
      <el-input v-model="estimatedHeadCount" style="width: 200px;" placeholder="请输入标题"></el-input>
      <i class="el-icon-search"></i>
      <el-tabs type="border-card">
        <!-- 全部任务 -->
        <el-tab-pane label="全部任务">

          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">
            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
            <el-table-column label="操作">
              <!-- <el-button type="text" @click="drawer = true">详细</el-button>

              <el-button type="text" @click="dates">aaa</el-button> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 分配给我的 -->
        <el-tab-pane label="分配给我的">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">
            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
            <el-table-column label="操作">
              <!-- <el-button type="text" @click="drawer = true">详细</el-button>

              <el-button type="text" @click="dates">aaa</el-button> -->
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <!-- 我创建的 -->
        <el-tab-pane label="我创建的">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">
            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
            <el-table-column label="操作">
              <!-- <el-button type="text" @click="drawer = true">详细</el-button>

              <el-button type="text" @click="dates">aaa</el-button> -->
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <!-- 我参与的 -->
        <el-tab-pane label="我参与的">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">
            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
            <el-table-column label="操作">
              <!-- <el-button type="text" @click="drawer = true">详细</el-button>

              <el-button type="text" @click="dates">aaa</el-button> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 仪表盘抽屉 -->

    </el-tab-pane>

    <!-- 项目 -->
    <el-tab-pane label="项目" name="second">
      <el-input v-model="estimatedHeadCount" style="width: 200px;" placeholder="请输入项目名"></el-input>
      <i class="el-icon-search"></i>
      <el-tabs type="border-card">

        <!-- 全部任务-->
        <el-tab-pane label="全部任务">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="项目名称">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="完成度">
              <el-progress :percentage="50"></el-progress>
            </el-table-column>
            <el-table-column prop="address" label="截止时间 ">
            </el-table-column>
            <el-table-column prop="" label="创建时间">
            </el-table-column>
            <el-table-column prop="" label="管理员">
            </el-table-column>
            <el-table-column prop="" label="操作">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 归档任务 -->
        <el-tab-pane label="归档任务">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="项目名称">
            </el-table-column>
            <el-table-column prop="address" label="归档时间 ">
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template>
                <el-button type="text" @click="open">恢复项目</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <!-- 回收站 -->
        <el-tab-pane label="回收站">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="项目名称">
            </el-table-column>
            <el-table-column prop="address" label="删除时间 ">
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template>
                <el-button type="text" @click="open">恢复项目</el-button>
                <el-button type="text">彻底删除</el-button>
              </template>

            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-tab-pane>

    <!-- 项目任务 -->
    <el-tab-pane label="项目任务" name="third">
      <el-input v-model="estimatedHeadCount" style="width: 200px;" placeholder="请输入标题"></el-input>
      <i class="el-icon-search"></i>
      <el-tabs type="border-card">

        <!-- 全部任务 -->
        <el-tab-pane label="全部任务">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">
            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 分配给我的 -->
        <el-tab-pane label="分配给我的">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">
            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 我创建的 -->
        <el-tab-pane label="我创建的">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">
            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 我参与的 -->
        <el-tab-pane label="我参与的">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">
            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>

    <!-- 工时 -->
    <el-tab-pane label="工时" name="fourth">
      <el-input v-model="estimatedHeadCount" style="width: 200px;" placeholder="搜索标题"></el-input>
      <i class="el-icon-search"></i>
      <el-tabs type="border-card">
        <!-- 按照项目 -->
        <el-tab-pane label="按照项目">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="name" label="总计" width="180">
            </el-table-column>
            <!-- <el-table-column v-for="(dateObj, index) in datas" :key="index" :prop="'date' + dateObj.date"
              :label="dateObj.date + dateObj.day">

            </el-table-column> -->
          </el-table>
        </el-tab-pane>
        <!-- 按照成员 -->
        <el-tab-pane label="按照成员">

        </el-tab-pane>
      </el-tabs>

    </el-tab-pane>

    <!-- 任务池 -->
    <el-tab-pane label="任务池" name="task pool">
      <el-input v-model="estimatedHeadCount" style="width: 200px;" placeholder="搜索标题"></el-input>
      <i class="el-icon-search"></i>
      <el-tabs type="border-card">

        <!-- 全部任务 -->
        <el-tab-pane label="全部任务">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">

            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
            <el-table-column label="操作">
              <!-- <el-button type="text" @click="drawer = true">详细</el-button> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 分配给我的 -->
        <el-tab-pane label="分配给我的">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">

            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
            <el-table-column label="操作">
              <!-- <el-button type="text" @click="drawer = true">详细</el-button> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 我创建的 -->
        <el-tab-pane label="我创建的">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">

            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
            <el-table-column label="操作">
              <!-- <el-button type="text" @click="drawer = true">详细</el-button> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 我参与的 -->
        <el-tab-pane label="我参与的">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="任务标题">
              <template slot-scope="scope">
                <div @click="handleNameclick(scope.row, scope.column, scope.$index)">ffscope.row.name
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="描述">

            </el-table-column>
            <el-table-column prop="address" label="优先级">
            </el-table-column>
            <el-table-column prop="" label="任务类型">
            </el-table-column>
            <el-table-column prop="" label="任务状态">
            </el-table-column>
            <el-table-column prop="" label="创建人">
            </el-table-column>
            <el-table-column prop="" label="参与人">
            </el-table-column>
            <el-table-column prop="" label="所属项目">
            </el-table-column>
            <el-table-column prop="" label="截止日期">
            </el-table-column>
            <el-table-column prop="" label="创建日期">
            </el-table-column>
            <el-table-column label="操作">
              <i class="el-icon-more"></i>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      // 上传文件
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      // 标题js
      activeName: 'first',
      // 仪表盘全部任务
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      // 抽屉
      drawer: false,
      currentYear: new Date().getFullYear(),
      datas: [],
      // 任务进度
      options: [{
          value: '选项1',
          label: '未完成'
        }, {
          value: '选项2',
          label: '进行中'
        }, {
          value: '选项3',
          label: '已完成'
        }, ],
        value: '',

    };

  },
  methods: {
    // 是否恢复项目
    open() {
      this.$confirm('是否恢复项目', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '恢复成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消恢复'
        });
      });
    },
    // 进度条
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    },
    handleNameclick(row, column, index) {
      this.drawer = true;
    },
    handleClick1(tab, event) {
      console.log(tab, event);
    },
    // 上传文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    dates() {
      let dates = [];
      for (let month = 0; month < 12; month++) {
        let daysInMonth = new Date(this.currentYear, month + 1, 0).getDate();
        for (let day = 1; day <= daysInMonth; day++) {
          let date = new Date(this.currentYear, month, day);
          dates.push({
            date: `${this.currentYear}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`,
            day: this.getDayOfWeek(date)
          });
          this.datas.push({
            date: `${this.currentYear}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`,
            day: this.getDayOfWeek(date)
          });

          // let data2 = "2024-01-01"
          // this.datas.forEach(item => {
          //   console.log(item.day)
          //   if(data2 === item.date){
          //     item.dataA = data2
          //   }
          // })
        }
      }
      // console.log(dates);
      console.log(this.datas);
      return dates;
    },
    getDayOfWeek(date) {
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return days[date.getDay()];
    }

  },
  computed: {

  },
};
</script>
